<template>
	<div class="tab">
		<cube-tab-bar
			:showSlider="true"
			:useTransition="false"
			v-model="selectedLabel"
			:data="tabs"
			ref="tabBar"
			class="border-bottom-1px"
		>
		</cube-tab-bar>
		<div class="slide-wrapper">
			<cube-slide
				:loop="false"
				:auto-play="false"
				:show-dots="false"
				:initial-index="index"
				ref="slide"
				:options="slideOptions"
				@change="onChange"
			>
				<cube-slide-item v-for="(tab, index) in tabs" :key="index">
					<component :is="tab.component" :data="tab.data" ref="component"></component>
				</cube-slide-item>
			</cube-slide>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'tab',
		props: {
			tabs: {
				type: Array,
				default() {
					return []
				}
			},
			initialIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				index: this.initialIndex,
				slideOptions: {
					listenScroll: true,
					probeType: 3,
					directionLockThreshold: 0
				}
			}
		},
		computed: {
			selectedLabel: {
				get() {
					return this.tabs[this.index].label
				},
				set(newVal) {
					this.index = this.tabs.findIndex(value => value.label === newVal)
				}
			}
		},
		mounted() {
			this.onChange(this.index)
		},
		methods: {
			onChange(current) {
				// this.index = current || 0
				// const component = this.$refs.component[current]
				// component.fetch && component.fetch()
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import "~common/stylus/variable"
	.tab
		position: fixed
		bottom: 44px
		width: 100%
		height: 100%
		>>> .cube-tab
			padding: 10px 0
			display: flex
			flex-direction: column
			height: 100%
		.slide-wrapper
			height: calc(100% - 36px)
			flex: 1
			overflow: hidden
</style>
